<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Nokia Mobile Web Components</title>
		<meta charset="utf-8" >
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="author" content="">
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="shortcut icon" href="resources/images/favicon.ico" />
		<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
		<script src="resources/scripts/nokia.mwc-1.0.js"></script>
		<script>
			function init() {
				var main_menu = SlidingDrawer({"id":"top"});
				
			}
			addEvent(window, "load",init);
		</script>
	</head>
	<body>
		<header id="top" class="sliding-drawer">
			<img src="resources/images/component.png" alt="component" />
			<h1>Mobile Web Components</h1>
			<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
			<nav>
				<ul>
					<li><a href="index.html">Overview</a></li>
					<li><a href="collapsible.html">Collapsible</a></li>
					<li><a href="scrollable.html">Scrollable</a></li>
					<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
					<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
					<li><a href="slideshow.html">Slideshow</a></li>
					<li><a href="miscellaneous.html">Miscellaneous</a></li>
				</ul>
			</nav>
		</header>
		
		<header>
			<h2>Sliding Drawer</h2>
			<p>A convenient top-level, expandable sliding menu.</p>
		</header>
		<figure>
	  		<img src="resources/images/headers/flickr-striatic-2612308.jpg" />
			<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/striatic/2612308" title="Woodview Christmas drawers wide">striatic</a></figcaption>
	</figure>
		</figure>
		<nav id="contents">
			<h4>Contents</h4>
			<ol>
				<li><a href="#intro">Introduction</a></li>
				<li><a href="#usage">General Usage</a></li>
				<li><a href="#properties">Properties & Functions</a></li>
				<li><a href="#demo">Demo: Sliding Drawer</a></li>
			</ol>
		</nav>
		<h3 id="intro">Introduction</h3>
		<p>The sliding drawer is the menu we've included at the top of each Mobile Web Component page.  The component includes the menu itself, as well as the top header area, which can be used to display the site's logo or any other high-level text.</p>
		<p>If supported, hardware accelerated CSS3 transforms are used (instead of JavaScript) to efficiently animate between the open and closed states of the component.</p>
		<h3 id="usage">General Usage</h3>
		<p>Tapping the menu container will hide or reveal the list of menu options. Both the bottom tab (with the arrow) and the top header area are active and can be used to trigger the sliding action. This component was designed to be the <strong>top-most element on a page</strong> and should (ideally) be used in that position.</p>
		<h3 id="properties">Properties & Functions</h3>
		<table>
			<tr><td>id</td>
			<td>#id of DOM element <em>(usually #top)</em></td></tr>
			<tr><td>open</td><td>true | false</td></tr>
			<tr>
			<td>toggle(state)</td>
			<td>toggle state <em>optional "open" | "close"</em></td></tr>
		</table>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>HTML</h4>
<pre>
&lt;!-- entire component including header --&gt;
&lt;header id=&quot;top&quot;&gt;
  &lt;img src=&quot;resources/images/component.png&quot; alt=&quot;component&quot; /&gt;
  &lt;h1&gt;Mobile Web Components&lt;/h1&gt;
  &lt;p&gt;http://projects.nokia.com/mobile-web-components&lt;/p&gt;
  &lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Overview&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;collapsible.html&quot;&gt;Collapsible&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;scrollable.html&quot;&gt;Scrollable&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;popmenu.html&quot;&gt;Pop Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;pullmenu.html&quot;&gt;Pull Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;slideshow.html&quot;&gt;Slideshow&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;miscellaneous.html&quot;&gt;Miscellaneous&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/header&gt;
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
		<p>The above code snippet defines the basic structure of a sliding drawer component.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>JavaScript</h4>
<pre>
// the menu is closed by default
var slide_menu = SlideMenu({"id":"top"});
 
// if you'd like the menu open when created just set the &quot;open&quot; option to true
var slide_menu = SlideMenu({&quot;id&quot;:&quot;top&quot;, &quot;open&quot;:true});
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
		<p>Once the menu items have been created, we can wire things up with the JavaScript shown above. The id specified should correspond to the id assigned to the component's <code>&lt;header&gt;</code> element. The menu is closed by default, but as mentioned above, this behaviour can be customized using the (optional) option provided.</p>
		<h3 id="demo">Demo</h3>
		<p>This component can be found at the top of every Mobile Web Components page. It was designed to be the top most element on a page, and should (ideally) be used in that position.</p>
		<nav><a href="#top" class="top">back to top</a></nav>
		<footer>
			<nav>
				<ul>
					<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
					<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
				</ul>
			</nav>
			<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
		</footer>
	</body>
</html>

